<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻详情页</title>
    <style>
        header{
            position: fixed;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #8e8e8e;
        }
        header img{
            width: 30px;
            height: 30px;
            margin-left: 8px;
            margin-top: 10px;
        }
        #banner img{
            width: 100%;
            /*height: 200px;*/
        }

        .type{
            font-size: 14px;
        }

        .type>:last-child{
            float: right;
        }


    </style>
</head>
<body>
<header>
    <img src="img/return.png" alt="" onclick="history.back()">
</header>
<div id="banner" style="width: 500px;">
    <img src="" alt="" style="width: 500px;">
</div>
<article>
    <h1></h1>
    <p class="type">
        <span>分类:<span id="type"></span></span>
        <span>发布日期：<span id="create_time"></span></span>
    </p>
</article>
<hr>
<div id="content">

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script src="sever/url.js"></script>
<script>
    $(document).ready(function() {
        var reg=/id=(\d+)/
        var arr=reg.exec(location.search);
        var id=arr[1];

        $.ajax({
            url:url+'api/news/newsdetail.html',
            type:'GET',
            dataType:'json',
            data:{
                id:id
            },
            success:function (res) {
                var data=res.data;
                // console.log(data)
                $('#banner img').attr('src',url+'uploads/'+data.img);
                $('article>h1').text(data.title);
                $('#type').text(data.name);
                $('#create_time').text(data.create_time.substring(0,10));
                $('#content').html(data.content);
            },
            error:function (res) {
                console.log(res)
            }
        })

    })

</script>
</body>
</html>